<template>
    <div class="login">
        <div class="guntest">滚动测试</div>
        <!-- <loadingBarVue></loadingBarVue> -->
        <el-card class="box-card">
            <el-form ref="form" :rules="rules" :model="formInline" class="demo-form-inline">
                <el-form-item label="账号" prop="user">
                    <el-input v-model="formInline.user" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formInline.password" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { reactive, readonly, ref } from 'vue'
import { useRouter } from 'vue-router';
import type { FormItemRule, FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import loadingBarVue from './loadingBar.vue';
import axios from 'axios'

const router = useRouter()

type Form = {
    user: string,
    password: string
}

type Rules = {
    [K in keyof Form]?: Array<FormItemRule>
}


const formInline = reactive<Form>({
    user: '',
    password: '',
})

const form = ref<FormInstance>()

const rules = reactive<Rules>({
    user: [
        {
            required: true,
            message: '需要写账号',
            type: "string"
        }
    ],
    password: [
        {
            required: true,
            message: '需要写密码',
            type: "string"
        }
    ]
})

const onSubmit = () => {
    // router.push('/index')
    form.value?.validate((validate) => {
        if (validate) {
            router.push('/index'),
                localStorage.setItem('token', '1')
        } else {
            ElMessage.error('请输入完整')
        }
    })
}

const initRouter = async () => {
    const result = await axios.get('http://localhost:9999/login', { params: formInline });
    result.data.route.forEach((v: any) => {
        router.addRoute({
            path: v.path,
            name: v.name,
            //这儿不能使用@
            component: () => import(`../views/${v.component}`)
        })
        router.push('/index')
    })
    console.log(router.getRoutes());
}



</script>
<style lang="less" scoped>
.login {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.guntest {
    widows: 100%;
    height: 2000px;
    background: black;
}
</style>